<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="commonTips" :style="{position: navbarHeight + statusBarHeight ? 'fixed':'unset', top: navbarHeight + statusBarHeight + 'px'}" class="tips">{{commonTips}}</view>
		<u-popup width="600" v-model="showNotice" :closeable="true" mode="center" border-radius="12">
			<view class="group-notice-title">群公告</view>
			<view v-if="noticeInfo" class="group-notice-content">
				<view>
					{{noticeInfo.content}}
				</view>
				<view class="im-group-notice-imgs">
					<image v-for="(img, imgindex) in noticeInfo.images" :key="imgindex" :src="img" mode="widthFix"></image>
				</view>
				<view class="group-notice-footer">
					<view>{{noticeInfo.publisher.nickname}}<text v-if="noticeInfo.publisher.remark">({{noticeInfo.publisher.remark}})</text><text class="footer-createtime">发表于{{noticeInfo.createtime}}</text></view>
					<text class="notice-item-footer-text">{{noticeInfo.reading_number}}人已读</text>
				</view>
				<view class="group-notice-button">
					<u-button v-if="noticeInfo.receipt" :type="noticeInfo.receipted ? 'default':'primary'"  @click="receiptNotice(noticeInfo.id)">{{noticeInfo.receipted ? '您已确认':'确认收到'}}</u-button>
					<u-button v-if="!noticeInfo.receipt" type="default" @click="showNotice = false;">关闭</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup width="94%" border-radius="16" mode="center" :closeable="true" v-model="LinkPopupShow">
			<view class="link-popup-box">
				<view class="link-popup-title">你将要访问的网址是：</view>
				<view class="link-popup-url">{{linkPopupUrl}}</view>
				<view class="link-popup-tis">请确认是否继续访问，并注意您的账户和财产安全！</view>
				<view class="link-popup-buttons">
					<u-button :custom-style="{padding: '0 2rpx'}" class="link-popup-button-item" hover-class="none" type="primary" size="medium" plain>
						<u-link :href="linkPopupUrl"><text class="link-popup-url-button">访问</text></u-link>
					</u-button>
					<u-button @click="LinkPopupShow = false" class="link-popup-button-item" type="default" size="medium">取消</u-button>
				</view>
			</view>
		</u-popup>
		<u-navbar :background="navBackground" :custom-back="customBack">
			<view class="navbar-title flex align-center justify-center w100">
				<view class="title-content text-center">{{(userInfos && userInfos.nickname ? `${userInfos.nickname}医生` :info.sessionUser.nickname) + (info.sessionUser.user_count ? '(' + info.sessionUser.user_count + ')':'')}}</view>
				<view class="title-other" v-if="info.sessionUser.status" :class="'user-status-' + info.sessionUser.status.value">{{info.sessionUser.status.chinese}}</view>
			</view>
			<view @click="sessionMenu" class="menu-wrap" slot="right">
				<!-- <u-icon name="grid-fill" color="#000000" size="38"></u-icon> -->
			</view>
		</u-navbar>
		
		<!-- mask 目前只用于长按消息菜单显示时 -->
		<view v-if="maskShow" @click="maskClick" :style="maskStyle" class="mask"></view>
		
		<view v-if="messageLongpressAction.length" :style="messageLongpressActionStyle" class="message-longpress-action">
			<view v-for="(item, index) in messageLongpressAction" :key="index" @click="messageLongpressActionClick(index)" class="longpress-action-item">{{item.name}}</view>
			<view class="longpress-action-pin" :style="messageLongpressActionPinStyle">
				<u-icon name="arrow-down-fill" color="#262626" size="30"></u-icon>
			</view>
		</view>
		
		<!-- 正在录音-start -->
		<view v-if="recording" class="recorder-box">
			<view class="recorder-del" id="delrecorder" :style="{opacity: delElOpacity}">
				<image class="recorder-img" src="/static/icon/del.png" mode="widthFix"></image>
				<view class="recorder-text">{{recorderText}}</view>
			</view>
			<view class="recorder">
				<view class="recorder-title">正在录音</view>
				<image class="recording" src="/static/icon/recording.gif" mode="widthFix"></image>
				<view v-if="recordingCountDown !== false" class="recorder-content">还能录制 {{recordingCountDown}} 秒</view>
			</view>
		</view>
		<!-- 正在录音-end -->
		
		<!-- 聊天记录-start -->
		<scroll-view
		@scroll="scrollWrapper"
		@scrolltoupper="wrapperScrolltoupper"
		@click="clickWrapper"
		class="wrapper"
		id="wrapper"
		:scroll-y="true"
		:scroll-with-animation="wrapperWithAnimation"
		:scroll-top="wrapperScrollTop"
		:style="{height: 'calc(100vh - ' + (navbarHeight + statusBarHeight) + 'px - ' + ((showGuess || showUser) ? (writeHeight + guessHeight) : 0) + 'px)'}"
		>
			<block v-if="messageList.length" v-for="(item, index) in messageList" :key="index">
				<!-- <view class="status">
					<text>{{item.datetime}}</text>
				</view> -->
				<block v-for="(message, m) in item.data" :key="message.id">
					<block v-if="message.type == 'system'">
						<view v-if="message.message.display_user == 'all' || message.message.display_user == userId" class="status">
							<text>{{message.message.message}}</text>
						</view>
					</block>
					<view v-else class="message-item" :class="message.sender">
						<image v-if="(info.type == 'single') || (info.chat_id == 3 && info.type == 'service')" @click="clickAvatar(info.type, message.sender)" class="message-avatar" :src="(message.sender == 'you') ? info.sessionUser.avatar :info.user.avatar" mode="aspectFill"></image>
						<image v-if="info.type == 'group'" @click="clickAvatar('group', message.pushUser.id)" class="message-avatar" :src="message.pushUser.avatar" mode="aspectFill"></image>
						<view class="message-content-box">
							<view v-if="message.pushUser && message.pushUser.nickname" class="chat-record-nickname">{{message.pushUser.nickname}}</view>
							<view :id="'message-' + message.id" @longpress="longpressMessage(message)" class="message-content" :class="message.pushUser && message.pushUser.nickname ? '':'hide-nickname'">
								<link-message v-if="message.type == 'link'" :value="message" :LinkPopupShow.sync="LinkPopupShow" :linkPopupUrl.sync="linkPopupUrl"></link-message>
								<view v-else-if="message.type == 'video'" @click="playVideo(message)" class="video-message-box">
									<view v-show="!message.play" class="video-message-cover">
										<view class="video-message-cover-play">
											<u-icon name="play-right-fill" size="40" color="#ffffff"></u-icon>
											<view>{{message.currentTime + (message.duration ? ' / ' + message.duration:'')}}</view>
										</view>
									</view>
									<!-- #ifdef MP-WEIXIN -->
									<video @timeupdate="timeUpdate" :style="{width: message.play ? '400rpx':'1rpx'}" @fullscreenchange="fullScreenChange" :id="'video-' + message.id" :ref="'video-' + message.id" class="video-message-wx" :src="message.message" object-fit="contain" controls></video>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<block v-if="userPlatform == 'ios'">
										<video v-if="message.play" @timeupdate="timeUpdate" @fullscreenchange="fullScreenChange" :id="'video-' + message.id" :ref="'video-' + message.id" class="video-message" :src="message.message" object-fit="contain" controls></video>
									</block>
									<video v-else @timeupdate="timeUpdate" :style="{display: message.play ? 'block':'none'}" @fullscreenchange="fullScreenChange" :id="'video-' + message.id" :ref="'video-' + message.id" class="video-message" :src="message.message" object-fit="contain" controls></video>
									<!-- #endif -->
								</view>
								<view v-else-if="message.type == 'audio'" @click="playAudio(message, index, m)" class="audio-message">
									<u-icon :name="message.play ? 'pause':'play-right-fill'" size="36" color="#999999"></u-icon>
									<text class="audio-message-text">{{message.currentTime + (message.duration ? ' / ' + message.duration:'')}}</text>
								</view>
								<view v-else-if="message.type == 'voice'" @click="playAudio(message, index, m)" class="voice-message">
									<view v-if="message.sender == 'me'" class="voice-duration">{{message.message.duration + '" '}}</view>
									<image class="voice-message-img" :src="message.play ? ('/static/icon/' + message.sender + '-voice.gif'):('/static/icon/' + message.sender + '-voice.png')" mode="widthFix"></image>
									<view v-if="message.sender == 'you'" class="voice-duration">{{'" ' + message.message.duration}}<view v-if="!message.voice_playback" class="unread-voice">•</view></view>
								</view>
								<message :isShow="false" v-else :value="message"></message>
							</view>
						</view>
					</view>
					<view class="sub_title" v-if="message.message.sub_title && message.type == 'kbs_list'"> <text>{{message.message.sub_title}}</text> </view>
					<view class="sub_titles" v-if="message.type == 'section'">
						<text>继续咨询表明您已阅读并同意银龄的</text> 
						《用户协议》<text> 、</text>
						《知情同意书》<text>及</text> 
						《隐私政策》
					</view>
				</block>
			</block>
			<view class="section padding-bottom-sm" v-if="showDoctor">
				<view class="head" v-if="showDoctorHead">
					<view class="">根据您的描述</view>
					<view class="">
						<view class="">
							为您分诊至 <text>{{sectionData.section_name}}</text>
						</view>
						<text @tap="chooseSection">重选科室</text>
					</view>
				</view>
				<view class="doctor" v-if="showDoctorList">
					<view class="title">
						<text>优选专家</text>
						<text class="desc">实名认证·品质保障·专家未回应可退费</text>
					</view>
					<wanl-empty style="padding: 0 0 40rpx 0;" v-if="doctorList.length == 0" text="暂时没有相关医生"></wanl-empty>
					<view class="list" v-if="doctorList.length > 0">
						<block v-for="(item,index) in doctorList" :key="index">
							<view class="item bg-white" :key="index" v-if="index < 3" @tap="$wanlshop.to(`/pages/medicalcare/bookingsystem/doctor?id=${item.id}`)">
								<view class="top">
									<view class="img">
										<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
										<text :class="{c:item.imUserStatus == 1}">{{item.imUserStatus_txt}}</text>
									</view>
									<view class="info">
										<view class="member">
											<text>{{item.name}}</text>
											<view class="text"><block v-for="(data,k) in item.section_ids_text" :key="k">{{data.name}}{{k+1 < item.section_ids_text.length ? '、' : ''}}</block></view>
											<text v-if="item.doctor_level_text">{{item.doctor_level_text}}</text>
										</view>
										<view class="address">{{item.title}}</view>
										<uni-rate readonly :allowHalf="true" :max="5" :value="item.exponent" :size="12" color="#CCCCCC" active-color="#4CBD66" />
									</view>
								</view>
								<view class="bottom">
									<view class="left">
										<text>擅长：</text>
										<text class="text-cut-2">
											<block v-for="(data,k) in item.diease_ids_text" :key="k">{{data.name}}{{k+1 < item.diease_ids_text.length ? '、' : ''}}</block>
										</text>
									</view>
									<view class="right">
										<text class="text-price">{{item.registration_fee}}</text>
										<text>咨询量 {{item.consult}}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<block v-if="!messageList.length">
				<view class="status">
					<text>暂时没有聊天记录...</text>
				</view>
			</block>
		</scroll-view>
		<!-- 聊天记录-end -->
		
		<!-- 消息输入-start -->
		<view class="im-write bg-white" :style="{bottom: writeBottom + 'px'}">
			<view class="guess w100" :style="{height: guessHeight + 'px'}" v-if="showGuess">
				<view class="title flex">
					<text>猜你想问</text>
					<text class="wlIcon-huanyipi" @tap="getDisease">换一换</text>
				</view>
				<view class="lists">
					<view class="item" v-for="(item,index) in disease" :key="index" @tap="chooseDisease(item)"> {{item.name}} </view>
				</view>
			</view>
			<view class="w100 user" :style="{height: guessHeight + 'px'}" v-if="showUser">
				<view class="title flex">
					<text>选择患者</text>
					<text class="text-green">新建患者</text>
				</view>
				<view class="lists">
					<view class="item" v-for="(item,index) in familyList" :key="index" @tap="chooseUser(item)">
						<text>{{item.name}}</text>
						<text>{{sexList[item.sex]}} {{item.age}}</text>
					 </view>
				</view>
			</view>
			<view class="toolbars w100" :style="{height: writeHeight + 'px'}" v-if="showGuess || showUser">
				<image class="toolbar-icon voice" @click="showVoice" :src="showVoiceBool ? '/static/icon/keyboard.png':'/static/icon/voice.png'" mode="widthFix"></image>
				<view class="write-textarea">
					<textarea v-if="!showVoiceBool" :disabled="messageContenteditable" :adjust-position="false" :show-confirm-bar="false" :fixed="true" :focus="imMessageFocusBool"
					 :auto-height="true" :cursor="imMessageFocusCursor" :cursor-spacing="14" maxlength="-1" @blur="imMessageBlur" @input="imMessageInput"
					 @focus="imMessageFocus" :confirm-type="sendButtonType" @confirm="sendButtonConfirm" v-model="imMessage" class="im-message" :class="messageContenteditable ? 'disabled':''" placeholder="请详细描述病情（至少5字）"></textarea>
					<view v-else class="voice-input" hover-class="voice-input-hover" @touchstart="startRecorder" @touchmove="moveRecorder" @touchend="endRecorder">按住 说话</view>
				</view>
				<view class="write-right">
					<image class="toolbar-icon emoji images" src="/static/icon/image.png" @click="clickMoreTool('image')" mode="widthFix"></image>
					<button class="send-btn" @click="sendMessage(imMessage, 'default')" hover-class="send-btn-hover">发送</button>
				</view>
				
			</view>
			<!-- 消息输入-end -->
		</view>
		<u-popup v-model="showSection" mode="bottom" height="680rpx" border-radius="20">
			<view class="head" style="height: 80rpx;">
				<text>修改科室</text>
				<view class="iconfont">
					<text @tap="showSection = false;" class="wlIcon-shibai"></text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="lefts" style="height: 600rpx;">
				<view v-for="(item,index) in dataList" :key="index" :class="{cur:cur == index}" @tap="chooseDiseases(item)">
					<image :src="$wanlshop.oss(item.image)" mode="heightFix"></image>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</u-popup>
		
	</view>
</template>

<script>
	import permision from "@/common/permission.js"
	let systemInfo = uni.getDeviceInfo();
	var recordingTime = null, recordingSecond = 0, recordingMoveY = 0, delRecorder = null, stopDelRecorder = false, recorderValid = false, cursor = 0, atUsersEd = [], defaultWriteHeight = 46
	export default {
		data() {
			return {
				cur:null,
				sexList:['未知','男','女'],
				showGuess: true,
				showUser: false,
				showDoctor: false,
				showDoctorHead: false,
				showDoctorList: false,
				showSection: false,
				id: 0,
				loadRecordsData: null,
				info: {
					sessionUser: {
						nickname: '加载中...',
						status: {
							chinese: '未知',
							value: 0
						}
					}
				},
				userId: 0,
				navBackground: {
					backgroundColor: '#fff'
				},
				emoji:[],
				navbarHeight: 0,
				writeHeight: defaultWriteHeight,
				guessHeight: uni.upx2px(400),
				writeBottom: 0,
				wrapperWithAnimation: true,
				wrapperScrollTop: 0,
				wrapperScrollHeight: 0,
				statusBarHeight: uni.getWindowInfo().statusBarHeight,
				messageList: [],
				imMessageFocusBool: false,
				imMessageFocusCursor: 0,
				showSendButton: false,
				showTool: false,
				imMessage: '',
				messageContenteditable: false,
				sessionUserInputStatus: false,
				LinkPopupShow: false,
				linkPopupUrl: '',
				maskShow: false,
				maskStyle: '',
				messageLongpressAction: [],
				messageLongpressActionStyle: "",
				messageLongpressActionPinStyle: "",
				sendButtonType: 'done',
				userType: '',
				fastReply: {},
				uploadFormData: new Object(),
				userPlatform: '',
				showVoiceBool: false,
				recording: false,
				showNotice: false,
				noticeInfo: null,
				recordingCountDown: false,
				recorderText: '取消',
				delElOpacity: '0',
				showAtSelect: false,
				imWriteHeight: 0,
				atUsers: [],
				commonTips: '',
				lastMessage:'',
				userInfos: null,
				doctor:{
					name: '',
					image: ''
				},
				disease:[],
				familyList: [],
				doctorList: [],
				sectionData:{
					id:'',
					section_name:'',
					section_id:''
				},
				dataList:[]
			}
		},
		watch: {
			messageList: {
				handler(newName, oldName) {
					// console.log(newName)
					if(newName && newName.length > 0) {
						let data = newName[0].data;
						let temp = data.filter((item) => {
						  return item.type == 'kbs_list';
						});
						if(temp.length > 0) {
							let d = temp[temp.length - 1];
							this.sectionData = d.message.kbs[0]
							// console.log(this.sectionData)
							this.$u.throttle(this.getDoctor(), 500)
						}
					}
				},
				immediate: true,
				deep: true
			},
		},
		onLoad: function (query) {
			// this.guessHeight = uni.upx2px(400);
			// #ifdef APP-PLUS || H5
			this.navbarHeight = this.navbarHeight ? this.navbarHeight : 44;
			// #endif
			
			// #ifdef MP
			if (systemInfo.platform == 'ios') {
				var platformHeight = 44;
				defaultWriteHeight = 60;
			} else {
				var platformHeight = 48;
				defaultWriteHeight = 46;
			}
			this.navbarHeight = this.navbarHeight ? this.navbarHeight : platformHeight;
			this.writeHeight = defaultWriteHeight
			// #endif
			
			this.id = query.id ? query.id : 0
			this.ws.pageFun(this.pageDataLoad, this);
			// this.ws.getEmoji().then(res => {
			// 	this.emoji = res
			// }).catch(res => {
			// 	this.$refs.uToast.show({
			// 		title: '加载表情包失败,请重试!',
			// 		type: 'error'
			// 	})
			// })
			
			// 申请录音权限
			// #ifndef APP-PLUS || H5
			uni.authorize({
				scope: 'scope.record'
			})
			// #endif
			
			// APP检查权限
			// #ifdef APP-PLUS
			if(this.ws.userPlatform == 'android' && !this.requestAndroidPermission('android.permission.RECORD_AUDIO')) {
				that.recorderAuthModal()
			}
			// #endif
			if(query.data) {
				let data = JSON.parse(query.data)
				data.avatar = this.$wanlshop.oss(data.avatar)
				this.userInfos = data
			}
			
			if(this.$store.state.user.doctor) {
				this.getdoctorinfo()
			}
			this.getDisease()
		},
		onShow:function(){
			this.ws.checkNetwork(this)
			if (this.ws.collectionSelected) {
				for (let c in this.ws.collectionSelected) {
					this.sendMessage(this.ws.collectionSelected[c].message, this.ws.collectionSelected[c].type)
				}
				this.ws.collectionSelected = []
			}
			
			if (this.ws.pageRefresh.sessionInfo) {
				this.ws.pageFun(this.pageDataLoad, this);
				this.ws.pageRefresh.sessionInfo = false
			}
		},
		onHide: function (){
			this.ws.pauseAudio('hide', this, 'session')
		},
		onUnload: function () {
			this.ws.pauseAudio('unload', this, 'session')
		},
		methods: {
			async getDisease() {
				await uni.request({
					url: '/common/getKeywords',
					method: 'POST',
					success: res => {
						this.disease = res.data;
					}
				});
				await uni.request({
					url: `/member/family/lists`,
					method:"POST",
					data:{
						limit:100
					},
					success: res => {
						this.familyList = res.data.data;
					}
				});
			},
			async getDoctor() {
				await uni.request({
					url: `/addons/internethospital/api.doctor/lists`,
					method: "POST",
					data: {
						section: this.sectionData.section_id
					},
					success: res => {
						this.doctorList = res.data.data;
					}
				});
			},
			chooseUser(data) {
				let that = this;
				this.sendMessage(`${data.name} ${this.sexList[data.sex]} ${data.age}`, 'section')
				this.showUser = false;
				this.showDoctor = true
				this.showDoctorHead = true;
				setTimeout(() => {
					this.showDoctorList = true
				}, 1000);
			},
			async chooseSection() {
				await uni.request({
					url: '/addons/internethospital/api.hospital/section',
					method: 'POST',
					success: res => {
						this.dataList = res.data
						this.showSection = true;
					}
				});
			},
			chooseDiseases(data) {
				this.showDoctor = false;
				this.showDoctorHead = false;
				this.showDoctorList = false
				this.sectionData = {
					section_name:data.name,
					section_id:data.id
				}
				this.showSection = false;
				uni.request({
					url: `/addons/internethospital/api.doctor/lists`,
					method: "POST",
					data: {
						section: data.id
					},
					success: res => {
						this.doctorList = res.data.data;
						this.showDoctor = true;
						this.showDoctorHead = true;
						setTimeout(() => {
							this.showDoctorList = true
						}, 1000);
					}
				});
			},
			chooseDisease(data) {
				let that = this;
				this.sendMessage(data.name, 'service')
				this.showGuess = false;
				this.showUser = true;
			},
			async getdoctorinfo() {
				await uni.request({
					url: '/addons/internethospital/api.doctor/info',
					method: 'POST',
					success: res => {
						this.doctor = res.data;
					}
				});

			},
			customBack() {
				this.$wanlshop.back()
			},
			insertAtUser: function (item) {
				item.nickname += '  '
				atUsersEd.push({
					id: item.id,
					nickname: item.nickname
				})
				this.hideAtUser()
				
				// 找到用户输入的搜索词，删除
				// 将当前@的用户全称输入至输入框
				let atSearchIdx = -1;
				let beforeCursor = this.imMessage.substr(0, cursor)
				for (let i = (beforeCursor.length - 1); i >= 0; i--) {
					if (beforeCursor[i] == ' ' && beforeCursor[i + 1] == ' ') {
						break;
					} else if (beforeCursor[i] == '@') {
						atSearchIdx = (i + 1)
					}
				}
				let delContent = beforeCursor.substr(atSearchIdx)
				this.imMessage = this.imMessage.substring(0, atSearchIdx) + item.nickname + this.imMessage.substring(atSearchIdx + delContent.length)
				
				// 聚焦到指定字符后
				this.imMessageFocusCursor = (cursor - delContent.length) + item.nickname.length
				
				setTimeout(() => {
					this.imMessageFocusBool = true
				}, 100)
			},
			receiptNotice: function (id) {
				var that = this
				that.showNotice = false
				if (!that.noticeInfo.receipt || (that.noticeInfo.receipt && that.noticeInfo.receipted)) {
					return false;
				}
				that.ws.pageFun(function() {
					that.ws.send({
						c: 'Message',
						a: 'receiptGroupChatNotice',
						data: {
							'id': id,
							'session_id': that.id
						}
					});
				}, that);
			},
			recorderAuthModal: function () {
				uni.showModal({
					title: '温馨提示',
					content: '无录音权限，无法发送语音~',
					cancelText: '关闭',
					confirmText: '去授权',
					success(res) {
						if (res.confirm) {
							permision.gotoAppPermissionSetting()
						}
					}
				})
			},
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID)
				if (result == 1) {
					return true;
				} else {
					return false;
				}
			},
			startRecorder: function (e) {
				if (this.recording) {
					return false;
				}
				var that = this, lastErrTime = 0;
				that.recording = true
				
				recordingMoveY = e.changedTouches[0].clientY
				delRecorder = uni.createSelectorQuery().select('#delrecorder');
				recordingSecond = 0
				stopDelRecorder = false
				recorderValid = false
				if (recordingTime) {
					clearInterval(recordingTime)
				}
				
				// 计时
				setTimeout(() => {
					recorderValid = true
				}, 500)
				recordingTime = setInterval(() => {
					if (!that.recording) {
						that.recordingCountDown = false
						clearInterval(recordingTime)
						return false;
					}
					recordingSecond++
					if (recordingSecond >= 50) {
						that.recordingCountDown = (60 - recordingSecond)
					}
				}, 1000);
				
				this.ws.recorder.start({
					format: 'wav',
					duration: 60000
				});
				
				this.ws.recorder.onStop(res => {
					// 上传wav文件，发送wav文件
					that.recording = false
					that.delElOpacity = '0'
					if (!recorderValid || !res.tempFilePath) {
						that.$refs.uToast.show({
							title: '录音时间过短!',
							type: 'info'
						})
						return false;
					}
					if (stopDelRecorder) {
						that.$refs.uToast.show({
							title: '已取消发送语音~',
							type: 'info'
						})
						return false;
					}
					let uploadFileCallBack = function (res, file) {
						that.sendMessage({
							url: res.data.fullurl,
							duration: (recordingSecond == 0) ? 1:recordingSecond
						}, 'voice');
					}
					that.upload({path: res.tempFilePath}, uploadFileCallBack);
				})
				this.ws.recorder.onError(res => {
					that.recording = false
					that.delElOpacity = '0'
					let ctime = new Date().getTime()
					if (ctime - lastErrTime < 600) {
						return false;
					}
					lastErrTime = new Date().getTime()
					
					if (this.ws.userPlatform == 'ios' && !permision.judgeIosPermission("record")) {
						that.recorderAuthModal()
						return false;
					}
					
					uni.showModal({
						title: '录音发生错误',
						content: res.errMsg ? res.errMsg:'未知错误',
						showCancel: false,
						success: () => {
							// #ifdef MP
							if (res.errMsg == 'operateRecorder:fail auth deny') {
								uni.openSetting({
									complete() {}
								});
							}
							// #endif
						}
					})
				})
			},
			endRecorder: function (e) {
				var that = this,touche = e.changedTouches[0]
				if (!that.recording) {
					return false;
				}
				
				delRecorder.fields({
					rect: true
				}, data => {
					if (data && touche.clientY >= data.top && touche.clientY <= data.bottom && touche.clientX >= data.left && touche.clientX <= data.right) {
						stopDelRecorder = true
					}
					that.ws.recorder.stop();
				}).exec();
				
				that.recording = false
				that.delElOpacity = '0'
			},
			moveRecorder: function (e) {
				var that = this, touche = e.changedTouches[0]
				let delElOpacity = parseInt((recordingMoveY - e.changedTouches[0].clientY) / 20)
				if (delElOpacity > 1) {
					delElOpacity = (delElOpacity < 10) ? '0.' + delElOpacity:'1'
					if (this.delElOpacity != delElOpacity) {
						this.delElOpacity = delElOpacity
						delRecorder.fields({
							rect: true
						}, data => {
							if (data && touche.clientY >= data.top && touche.clientY <= data.bottom && touche.clientX >= data.left && touche.clientX <= data.right) {
								that.recorderText = '松开取消'
							} else {
								that.recorderText = '取消'
							}
						}).exec();
					}
				}
			},
			timeUpdate: function (e) {
				this.ws.playVideoItem.duration = this.ws.sToHs(Math.floor(e.detail.duration))
				this.ws.playVideoItem.currentTime = this.ws.sToHs(Math.floor(e.detail.currentTime))
			},
			fullScreenChange: function (e) {
				if (!e.detail.fullScreen) {
					var videoContext = uni.createVideoContext('video-' + this.ws.playVideoItem.id, this)
					videoContext.pause()
					this.ws.playVideoItem.play = false
				}
			},
			playVideo: function(item){
				this.ws.playVideo(item, this, 'session')
			},
			playAudio: function(item, index, m) {
				if (item.type == 'voice' && !item.voice_playback && item.sender == 'you') {
					this.messageList[index].data[m].voice_playback = true
					this.ws.pageFun(res => {
						this.ws.send({c: 'User', a: 'changeVoiceStatus', data: {'id': this.messageList[index].data[m].id}});
					}, this)
				}
				this.ws.playAudio(item, index, m, this)
			},
			sendButtonConfirm: function () {
				if (this.sendButtonType == 'send') {
					this.sendMessage(this.imMessage, 'default')
				}
			},
			sendMessage: function (message, type = 'default') {
				var that = this
				if (!message) {
					that.$refs.uToast.show({
						title: '请输入消息内容~',
						type: 'error'
					})
					return false;
				}
				if (that.messageContenteditable) {
					that.$refs.uToast.show({
						title: '管理员已禁止发言!',
						type: 'error'
					})
					return false;
				}
				
				if (type == 'default') {
					// 处理表情
					var reg = /\[(.+?)\]/g; // [] 中括号
					var regMatch = message.match(reg);
					if (regMatch) {
						for (let i in regMatch) {
							var emojiItem = that.findEmoji(regMatch[i]);
							message = message.replace(emojiItem.code, '<img draggable="false" class="emoji" title="' + emojiItem.name + '" src="' + emojiItem.image + '" />');
						}
					}
				}
				
				for (let u in atUsersEd) {
					atUsersEd[u].nickname = atUsersEd[u].nickname.substring(0, atUsersEd[u].nickname.length - 1);
				}
				
				var messageId = new Date().getTime() + that.info.id + Math.floor(Math.random() * 10000); // 临时消息ID
				that.ws.pageFun(function(){
					that.ws.send({
						c: 'Message',
						a: 'sendMessage',
						data: {
							message: message,
							type: type,
							session_id: that.info.id,
							tokens: that.ws.initializeData ? that.ws.initializeData.tokens : false, // 发消息时检测用户登录态是否过期
							message_id: messageId,
							identity: that.ws.initializeData.userinfo.identity,
							at_users: (that.info.type == 'group') ? atUsersEd:[]
						}
					})
				}, that)
				atUsersEd = []
				
				let messageObj = {
					id: messageId,
					message: message,
					pushUser: {
						avatar: that.ws.imgUrl(that.ws.initializeData.userinfo.avatar),
						id: that.ws.initializeData.userinfo.id
					},
					read_number: 0,
					sender: 'me',
					type: type,
					status: {
						status: '',
						statusClass: ''
					}
				}
				that.imMessage = ''
				that.imMessageChange()
				
				let messageListIndex = that.messageList.length - 1
				if (that.messageList[messageListIndex]) {
					that.messageList[messageListIndex].data.push(that.ws.buildMessage(messageObj));
				} else {
					that.messageList = that.messageList.concat({
						datetime: '刚刚',
						data: [that.ws.buildMessage(messageObj)]
					});
				}
				
				that.ws.messageShow.push(function(mThat) {
					that.ws.imSession({
						sessionInfo: {
							id: that.info.id,
							top: that.info.top
						},
						lastMessage: {
							last_time: that.getHoursMinutes(),
							last_message: that.ws.formatMessage(messageObj)
						},
						unreadMessagesNumber: 0
					}, mThat)
				});
				that.inputStatus(false)
				that.scrollIntoFooter(300, 99992)
			},
			findEmoji: function(emojiCode) {
				for (let i in this.emoji) {
					if (this.emoji[i].code == emojiCode) {
						return this.emoji[i];
					}
				}
				return false;
			},
			maskClick: function () {
				this.maskShow = false
				this.hideAtUser()
				this.messageLongpressAction = []
			},
			messageLongpressActionClick: function (index) {
				var that = this, messageId = that.messageLongpressAction[index].id, action = that.messageLongpressAction[index].action
				if (action == 'forward') {
					// 转发
					that.maskClick()
					uni.navigateTo({
						url: '/pages/common/pick-user/pick-user?action=message-forward&forward_type=message&message_id=' + messageId + '&sessionId=' + that.id
					})
				} else {
					that.ws.pageFun(() => {
						that.ws.send({
							c: 'Message',
							a: 'messageOperation',
							data: {
								id: messageId,
								action: 'message-' + action,
								source: 'uni-app'
							}
						});
					}, that)
				}
			},
			longpressMessage: function(e) {
				var that= this, action = []
				let message = uni.createSelectorQuery().select('#message-' + e.id);
				message.fields({
					rect: true,
					size: true
				}, data => {
					// 各种消息类型一个一个设置，确保菜单顺序
					if (e.type == 'default') {
						action = [
							{id: e.id, name: '复制', action: 'copy'},
							{id: e.id, name: '转发', action: 'forward'},
							{id: e.id, name: '收藏', action: 'collection'},
							{id: e.id, name: '待办', action: 'to-do'}
						]
					} else if (e.type == 'file' || e.type == 'link') {
						action = [
							{id: e.id, name: '复制', action: 'copy'},
							{id: e.id, name: '转发', action: 'forward'},
							{id: e.id, name: '收藏', action: 'collection'}
						]
					} else {
						action = [
							{id: e.id, name: '转发', action: 'forward'},
							{id: e.id, name: '收藏', action: 'collection'}
						]
					}
					
					if (that.info.type == 'single') {
						action.push({id: e.id, name: '删除', action: 'delete'})
					}
					
					if (e.sender == 'me') {
						let actionWidth = action.length * 40, missWidth = (actionWidth - data.width) + 20, left = (missWidth > 0) ? (data.left - missWidth):data.left
						that.messageLongpressActionStyle = 'top: ' + (data.top - 46) + 'px;left: ' + left + 'px';
					} else {
						that.messageLongpressActionStyle = 'top: ' + (data.top - 46) + 'px;left: ' + data.left + 'px';
					}
					that.maskShow = true
					that.messageLongpressAction = action
					that.messageLongpressActionPinStyle = 'top: ' + (data.top - 16) + 'px;left: ' + (data.left + 6) + 'px';
				}).exec()
			},
			getHoursMinutes: function() {
				var dateObj = new Date();
				var hours = dateObj.getHours();
				hours = hours < 10 ? '0' + hours : hours;
				var minutes = dateObj.getMinutes();
				minutes = minutes < 10 ? '0' + minutes : minutes;
				return hours + ':' + minutes;
			},
			selectEmoji: function(idx) {
				if (this.messageContenteditable) {
					this.$refs.uToast.show({
						title: '管理员已禁止发言!',
						type: 'error'
					})
					return false;
				}
				this.imMessage += this.emoji[idx].code
				this.imMessageChange();
				this.imMessageFocusBool = true
			},
			sessionMenu: function () {
				uni.navigateTo({
					url: '/pages/common/session-info/chat-setting?id=' + this.id
				})
			},
			clickAvatar: function (type, id) {
				// if (type == 'single') {
				// 	uni.navigateTo({
				// 		url: '/pages/common/center/info?id=' + (id == 'you' ? this.info.sessionUser.id:this.info.user.id)
				// 	})
				// } else if (type == 'group') {
				// 	uni.navigateTo({
				// 		url: '/pages/common/center/info?id=' + id
				// 	})
				// } else if (type == 'service') {
				// 	uni.navigateTo({
				// 		url: '/pages/common/center/info?id=' + (id == 'you' ? this.info.chat_id:this.info.user.id) + (id == 'you' ? '&type=service':'')
				// 	})
				// }
			},
			pageDataLoad: function () {
				var that = this
				let message = {
					c: 'User',
					a: 'loadSession',
					data: {
						'session_id': that.id,
						'page': 1
					}
				}
				that.ws.send(message);
				that.userType = that.ws.initializeData.userinfo.type
				that.fastReply = that.ws.initializeData.config.fast_reply
				that.userPlatform = that.ws.userPlatform
			},
			scrollWrapper: function() {
				this.maskShow && this.maskClick()
			},
			wrapperScrolltoupper: function () {
				if (!this.loadRecordsData) {
					return ;
				}
				var that = this
				that.loadRecordsData.page++;
				that.wrapperWithAnimation = false
				let wrapper = uni.createSelectorQuery().select('#wrapper');
				wrapper.fields({
					scrollOffset: true
				}, data => {
					that.wrapperScrollHeight = data.scrollHeight
				}).exec()
				
				that.ws.pageFun(function(){
					that.ws.send({ c: 'User', a: 'loadSession', data: that.loadRecordsData });
					that.loadRecordsData = null
				}, that)
			},
			clickWrapper: function () {
				this.clickTool(false)
			},
			showVoice: function () {
				// #ifdef H5
				uni.showModal({
					title: '温馨提示',
					content: 'H5端不支持发送语音，请切换其他平台',
					showCancel: false
				})
				return false;
				// #endif
				this.showVoiceBool = !this.showVoiceBool
			},
			clickTool: function (value) {
				if (!value || (value == this.showTool)) {
					this.showTool = false;
					this.writeBottom = 0;
					this.writeHeight = defaultWriteHeight;
				} else {
					this.showTool = value;
					this.writeBottom = 170;
					this.writeHeight = 216;
					this.showVoiceBool = false;
					this.scrollIntoFooter();
				}
			},
			clickMoreTool: function (name) {
				var that = this
				if (name == 'image') {
					that.ws.pageFun(() => {
						that.ws.send({
							c: 'ImBase',
							a: 'getUploadMultipart'
						});
					}, that)
					uni.chooseImage({
					    count: 1,
					    sizeType: ['original', 'compressed'],
					    sourceType: ['album', 'camera'],
					    success: function (res) {
							that.upload(res.tempFiles[0], function (res, file) {
								that.sendMessage(res.data.fullurl, 'image');
							});
						},
						fail: () => {}
					});
				} else if (name == 'attachment') {
					that.ws.pageFun(() => {
						that.ws.send({
							c: 'ImBase',
							a: 'getUploadMultipart'
						});
					}, that)
					var uploadFileCallBack = function (res, file) {
						let fileName = res.data.url.split('.');
						let fileSuffix = fileName[fileName.length - 1];
						let imgSuffix = ['png', 'jpg', 'gif', 'jpeg', 'bmp'];
						let audioSuffix = ['mp3', 'mpeg', 'wav', 'acc'];
						let videoSuffix = ['mp4', 'ogg', 'webm'];
						
						if (imgSuffix.includes(fileSuffix)) {
							that.sendMessage(res.data.fullurl, 'image');
						} else if (audioSuffix.includes(fileSuffix)) {
							that.sendMessage(res.data.fullurl, 'audio');
						} else if (videoSuffix.includes(fileSuffix)) {
							that.sendMessage(res.data.fullurl, 'video');
						} else {
							let fileSize = file.size ? (file.size / 1024).toFixed(2):0
							if (fileSize > 0) {
								fileSize = fileSize > 1024 ? (fileSize / 1024).toFixed(2) + 'Mb' : fileSize + 'Kb'
							}
							that.sendMessage({
								url: res.data.fullurl,
								size: fileSize,
								suffix: fileSuffix
							}, 'file');
						}
					}
					
					// #ifdef H5
					uni.chooseFile({
						count: 1,
						success (res) {
							that.upload(res.tempFiles[0], uploadFileCallBack);
						},
						fail: () => {}
					})
					// #endif
					
					// #ifndef H5
					uni.chooseVideo({
						count: 1,
						sourceType: ['camera', 'album'],
						success: function (res) {
							let path = {
								path: res.tempFilePath,
								size: res.size ? res.size:0
							}
							that.upload(path, uploadFileCallBack);
						},
						fail() {}
					});
					// #endif
				} else if (name == 'collection') {
					uni.navigateTo({
						url: '/pages/common/center/collection?action=send'
					})
				}
			},
			upload: function (path, callBack) {
				var that = this
				uni.showLoading({
					title: '正在上传...'
				})
				
				const uploadTask = uni.uploadFile({
					url: that.ws.buildUrl('upload', that.ws.initializeData.tokens.im_tourists_token),
					// #ifdef APP-PLUS || H5
					file: path,
					// #endif
					filePath: path.path,
					name: 'file',
					formData: that.uploadFormData,
					success: (uploadFileRes) => {
						uni.hideLoading()
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 1) {
							callBack(res, path)
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							})
						}
					},
					fail: res => {
						uni.hideLoading()
						uni.showModal({
							title: '温馨提示',
							content: '上传失败,请重试~',
							showCancel: false
						})
					},
					complete: res => {
						uni.hideLoading()
					}
				});
				
				// #ifndef APP-PLUS
				uploadTask.onProgressUpdate((res) => {
					uni.showLoading({
						title: res.progress + '%'
					})
				});
				// #endif
			},
			imMessageBlur: function () {
				this.imMessageFocusBool = false
				if (!this.showTool) {
					this.writeBottom = 0;
					this.writeHeight = defaultWriteHeight;
				}
				this.inputStatus(false)
			},
			imMessageFocus: function (e) {
				this.clickTool(false)
				
				let writeHeight = () => {
					this.writeBottom = e.detail.height || 0
					this.writeHeight = (parseInt(this.writeBottom) + defaultWriteHeight);
				}
				
				if (this.ws.userPlatform == 'ios') {
					// #ifdef APP-PLUS
					uni.onKeyboardHeightChange(res => {
						this.writeBottom = res.height || e.detail.height || 0
						this.writeHeight = (parseInt(this.writeBottom) + defaultWriteHeight);
						uni.offKeyboardHeightChange(() => {})
					})
					// #endif
					
					// #ifndef APP-PLUS
					writeHeight()
					// #endif
				} else {
					writeHeight()
				}
				
				this.scrollIntoFooter(0, 99993)
			},
			imMessageInput: function (e) {
				cursor = e.detail.cursor || e.detail.value.length
				
				// 从光标位置向前搜索@和空格符号
				let atSearchIdx = -1;
				let beforeCursor = e.detail.value.substr(0, cursor)
				for (let i = (beforeCursor.length - 1); i >= 0; i--) {
					if (beforeCursor[i] == ' ' && beforeCursor[i + 1] == ' ') {
						break;
					} else if (beforeCursor[i] == '@') {
						atSearchIdx = i
					}
				}
				if(atSearchIdx !== -1) {
					this.atUser(beforeCursor.substr(atSearchIdx + 1));
				} else if (this.showAtSelect) {
					this.hideAtUser()
				}
				
				this.imMessage = e.detail.value;
				this.imMessageChange()
				this.inputStatus()
			},
			atUser: function (keywords = '') {
				var that = this
				that.showAtSelect = true
				that.maskShow = true
				that.maskStyle = 'background:rgba(0, 0, 0, 0.1)';
				
				// 获得输入框高度
				let imWrite = uni.createSelectorQuery().select('.im-write');
				imWrite.fields({
					size: true
				}, data => {
					that.imWriteHeight = data.height
				}).exec()
				
				that.ws.pageFun(function(){
					that.ws.send({
						c: 'Message',
						a: 'groupChatAt',
						data: {
							'session_id': that.id,
							'method': 'get-all',
							'keywords': keywords
						}
					});
				}, that)
			},
			hideAtUser: function () {
				this.maskShow = false
				this.maskStyle = ''
				this.showAtSelect = false
			},
			// 显示/隐藏发送按钮-调整消息记录框高度
			imMessageChange: function() {
				var that = this
				that.showSendButton = (that.imMessage == '') ? false : true;
			},
			inputStatus: function (type = true) {
				var that = this
				if (that.info.type == 'single' && parseInt(this.ws.initializeData.config.user_config.input_status) == 1) {
					if (type && !that.inputStatusNotice) {
						var message = {
							c: 'Message',
							a: 'inputStatusNotice',
							data: {
								'session_id': that.info.id
							}
						};
						that.inputStatusNotice = true
					} else if (!type && that.inputStatusNotice) {
						var message = {
							c: 'Message',
							a: 'inputStatusNotice',
							data: {
								'end_input_session_id': that.info.id
							}
						}
						that.inputStatusNotice= false
					}
					that.ws.pageFun(function(){
						that.ws.send(message);
					}, that)
				}
			},
			scrollIntoFooter: function (timeout = 0, scrollTop = 0) {
				var that = this
				if (scrollTop) {
					setTimeout(function() {
						that.wrapperScrollTop = (that.wrapperScrollTop >= 99990) ? that.wrapperScrollTop + 200 : scrollTop
					}, timeout)
					return;
				}
				let messageScroll = uni.createSelectorQuery().select('#wrapper');
				messageScroll.fields({
					scrollOffset: true
				}, data => {
					setTimeout(function() {
						that.wrapperScrollTop = data.scrollHeight
					}, timeout)
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #ECECEC;
	overflow: hidden;
}
.menu-wrap {
	display: flex;
	align-items: center;
	padding: 12rpx;
	border-radius: 50%;
	margin-right: 60rpx;
	margin-top: -10rpx;
}
.navbar-title {
	display: flex;
	align-items: center;
}
.navbar-title .title-other {
	font-size: 22rpx;
	margin-left: 10rpx;
}
.title-content {
	display: block;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	max-width: 300rpx;
}
.wrapper {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}
.wrapper .status {
	display: flex;
	width: 100vw;
	align-items: center;
	justify-content: center;
	padding: 32rpx 20rpx;
}

.wrapper .status text {
	font-size: 24rpx;
	display: inline-block;
	background: #ccc;
	color: #fff;
	border-radius: 10rpx;
	padding: 6rpx 20rpx;
	line-height: 28rpx;
}
.message-item .message-avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 10rpx;
}
.wrapper .message-item {
	display: flex;
	padding: 10px;
	flex: 1;
	align-items: flex-start;
	position: relative;
	// &:nth-child(1) {
	// 	margin-top: 20rpx;
	// }
}
.wrapper .message-item.me {
	flex-direction: row-reverse;
	display: flex;
}
.chat-record-nickname {
    color: $--gray;
    font-size: 24rpx;
    padding: 4rpx 0;
}
.you .chat-record-nickname {
    text-align: left;
}
.me .chat-record-nickname {
    text-align: right;
}
.video-message-box {
	position: relative;
	min-height: 400rpx;
	min-width: 400rpx;
	overflow: hidden;
}
.video-message {
	width: 400rpx;
	height: 400rpx;
}
.video-message-wx {
	width: 400rpx;
	height: 400rpx;
	position: absolute;
}
.video-message-cover {
	height: 400rpx;
	width: 400rpx;
	background: $--black;
	color: $--white;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-message-cover-play {
	text-align: center;
	font-size: 30rpx;
}
.voice-duration {
	font-size: 28rpx;
}
.unread-voice {
	position: absolute;
	top: 35rpx;
	right: 8rpx;
	font-size: 28rpx;
	color: $--red;
}
.voice-message {
	display: flex;
}
.voice-message-img {
	width: 40rpx;
	height: 40rpx;
}
.audio-message {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	color: $--gray;
}
.audio-message-text {
	padding-left: 20rpx;
}
.message-content-box {
	position: relative;
	max-width: 72%;
	margin: 0 20rpx;
}
.wrapper .message-content {
	padding: 26rpx;
	font-size: 32rpx;
	display: block;
	vertical-align: top;
	border-radius: 10rpx;
	word-wrap: break-word;
	word-break: break-all;
}
.wrapper .message-item.me .message-content {
	color: #333;
	background-color: #CDF4D4;
}
.wrapper .message-item.you .message-content {
	color: #181818;
	background-color: #fff;
}
.wrapper .message-item .message-content:before {
	position: absolute;
	top: 48rpx;
	display: block;
	width: 16rpx;
	height: 12rpx;
	content: '\00a0';
	-webkit-transform: rotate(29deg) skew(-35deg);
	transform: rotate(29deg) skew(-35deg);
}
.message-content.hide-nickname:before {
	top: 30rpx !important;
}
.wrapper .message-item.you .message-content:before {
	left: -6rpx;
	background-color: #fff;
}

.wrapper .message-item.me .message-content:before {
	right: -6rpx;
	background-color: #CDF4D4;
}
.wrapper .message-item.me .file-name {
    color: $--white;
}
.wrapper .message-item.me .file-size {
    color: $--grey;
}
.im-message-status {
	align-self: flex-end;
    font-size: 12px;
    color: $--gray;
}
.at-select-box {
	position: relative;
}
.at-select-users {
	position: absolute;
	background: #FFFFFF;
	width: 100vw;
	box-sizing: border-box;
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
	z-index: 9992;
}
.close-at-select {
	font-size: 26rpx;
	float: right;
	color: #999999;
	padding: 20rpx;
}
.at-select-list {
	clear: both;
	max-height: 700rpx;
}
.fastim-data-none {
	text-align: center;
	font-size: 30rpx;
	line-height: 80rpx;
	height: 80rpx;
	color: #999999;
}
.at-select-item {
	display: flex;
	align-items: center;
	height: 90rpx;
	padding-left: 20rpx;
}
.at-select-item image {
	height: 60rpx;
	width: 60rpx;
	border-radius: 16rpx;
}
.at-select-item text {
	padding-left: 10rpx;
}
.im-write {
	box-shadow: 0 -2rpx 0 #e5e5e5;
	width: 100%;
	// padding: 8rpx 0;
	display: flex;
	flex-direction: column;
	position: fixed;
	bottom: 0rpx;
	box-sizing: border-box;
	z-index: 9993;
}
.im-write .toolbars {
	display: flex;
	align-items: center;
}
.write-textarea {
	flex: 1;
	background-color: #F4F4F4;
}
.voice-input {
	height: 76rpx;
	border-radius: 8rpx;
	padding: 18rpx;
	line-height: 40rpx;
	font-size: 30rpx;
	color: #181818;
	text-align: center;
}
.voice-input-hover {
	background: #EBEBEB;
}
.recorder-box {
	position: fixed;
	z-index: 9999;
	bottom: 410rpx;
	left: calc(25% - 110rpx);
}
.recorder-del {
	
}
.recorder-img {
	display: block;
	width: 90rpx;
	height: 90rpx;
	margin: 0 auto;
}
.recorder-text {
	padding-top: 10rpx;
	font-size: 28rpx;
	color: #EC3A4E;
	text-align: center;
}
.recorder {
	position: fixed;
	bottom: 380rpx;
	width: 220rpx;
	left: calc(50% - 110rpx);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 20rpx;
}
.recorder-title {
	color: #fff;
	width: 100%;
	text-align: center;
	padding: 30rpx;
	padding-bottom: 0;
	font-weight: bold;
}
.recording {
	display: block;
	width: 120rpx;
	height: auto;
	margin: 0 auto;
}
.recorder-content {
	font-size: 26rpx;
	text-align: center;
	color: $--white;
	padding-bottom: 20rpx;
	margin-top: -6rpx;
}
.im-message {
	// max-height: 150rpx;
	height: 54rpx !important;
	width: 100%;
	outline: none;
	border: none;
	resize: none;
	border-radius: 8rpx;
	padding: 0 18rpx;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
	line-height: 54rpx;
	font-size: 28rpx;
	color: #181818;
}
.im-message.disabled {
	background-color: $--bg-color;
	color: $--gray;
	font-size: 28rpx;
	text-align: center;
}
.im-message::-webkit-scrollbar {
	width: 4rpx;
}
.im-message::-webkit-scrollbar-track {
	background-color: $--white;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.im-message::-webkit-scrollbar-thumb {
	background-color: #e6e6e6;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.write-right {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 12rpx;
}
.im-write .toolbar-icon {
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	width: 40rpx;
	height: 40rpx;
	content: '';
	margin-left: 16rpx;
}
.toolbar-icon.voice {
	margin: 0 12rpx;
}
.toolbar-icon.images {
	width: 44rpx;
	height: 44rpx;
}
.send-btn {
	margin-left: 20rpx;
	background: #4cbd66;
	color: #fff;
	border-color: #4cbd66;
	outline: none;
	padding: 10rpx 30rpx;
	font-size: 24rpx;
	line-height: 1.5;
	border-radius: 50rpx;
}
.send-btn::after {
	border: none;
}
.send-btn-hover {
	background-color: #4cbd66;
}
.footer-tool {
	position: fixed;
	bottom: 0rpx;
	background-color: #fff;
	box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, .1);
	width: 100%;
	animation: show-footer-tool .1s;
	animation-fill-mode: forwards;
	padding: 10rpx;
	box-sizing: border-box;
	height: 170px;
	overflow-y: auto;
	overflow-x: hidden;
}
@keyframes show-footer-tool {
	from {
		height: 0;
	}

	to {
		height: 170px;
	}
}
.footer-tool .emoji-img {
	display: inline-block;
	height: 72rpx;
	width: 72rpx;
	padding: 10rpx;
}
.footer-tool .emoji-img image{
	height: 52rpx;
	width: 52rpx;
}
.footer-tool .emoji-img-hover {
	background: #F2F3F4;
}
.toolbar {
	display: flex;
	flex-wrap: wrap;
	padding: 10rpx;
}
.toolbar-item {
	width: 25%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
}
.toolbar-item-hover {
	background-color: #F2F3F4;
}
.toolbar-item image {
	width: 50rpx;
	height: 50rpx;
}
.toolbar-item view {
	display: block;
	width: 100%;
	font-size: 28rpx;
	line-height: 34rpx;
	text-align: center;
}
.fastim-color-blue {
	color: $--blue;
}
.fastim-color-red {
	color: $--red;
}
.session-user-input-status-box {
	position: relative;
}
.session-user-input-status {
	position: absolute;
    color: $--blue;
    width: 220rpx;
	padding-left: 12rpx;
}
.link-popup-box {
	padding: 80rpx 20rpx 20rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
}
.link-popup-title {
	font-weight: bold;
	font-size: 30rpx;
}
.link-popup-url {
	display: block;
	width: 90%;
	margin: 0 auto;
	color: $--blue;
	padding: 20rpx 0;
	word-break: break-all;
	word-wrap: break-word;
}
.link-popup-tis {
	color: $--gray;
}
.link-popup-buttons {
	padding-top: 20rpx;
	display: flex;
	height: 160rpx;
	align-items: center;
	justify-content: center;
}
.link-popup-button-item {
	margin-right: 40rpx;
}
.link-popup-url-button {
	display: inline-block;
	height: 70rpx;
	line-height: 70rpx;
	padding: 0 80rpx;
}
.wrapper .message-item.me .link-message {
	color: $--red;
}
.message-longpress-action {
	position: fixed;
	top: 400rpx;
	left: 200rpx;
	background: #262626;
	color: #BDBDBD;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	border-radius: 16rpx;
}
.longpress-action-item {
	display: block;
	padding: 20rpx 24rpx;
	border-left: 1px solid #5E5E5E;
}
.longpress-action-item:first-child{
	border: none;
}
.longpress-action-pin {
	position: fixed;
	top: 466rpx;
	left: 219rpx;
}
.mask {
	z-index: 9990;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
}
.reply-list {
	padding: 0 20rpx;
}
.reply-item {
	display: block;
	font-size: 28rpx;
	border-bottom: 1px solid #F2F2f2;
	padding: 20rpx 0;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.reply-item:last-child {
	border-bottom: none;
}
.group-notice-title {
	padding: 30rpx;
	padding-bottom: 20rpx;
	font-size: 30rpx;
	font-weight: bold;
}
.group-notice-content {
	padding: 0 30rpx;
}
.group-notice-button button {
	width: 280rpx;
	display: block;
	margin: 20rpx auto;
}
.im-group-notice-imgs {
    display: flex;
	flex-wrap: wrap;
	padding-top: 20rpx;
}
.im-group-notice-imgs image {
	width: 130rpx;
	height: 130rpx;
}
.group-notice-footer {
	font-size: 27rpx;
	color: $--gray;
	padding-top: 6rpx;
	padding-bottom: 10rpx;
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.footer-createtime {
	padding-left: 10rpx;
}
.notice-item-footer-text {
	padding-left: 26rpx;
}
.guess {
	padding: 20rpx 30rpx 20rpx 60rpx;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		text {
			display: inline-block;
			&:nth-child(1) {
				height: 44rpx;
				line-height: 44rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
			&:nth-child(2) {
				color: #666666;
				font-size: 28rpx;
				&:before {
					margin-right: 10rpx;
				}
			}
		}
	}
	.lists {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.item {
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			margin-right: 20rpx;
			background: #FAFBFD;
			border-radius: 10rpx;
			border: 1px solid #E6E7E9;
			margin-bottom: 20rpx;
			padding: 0 26rpx;
			color: #333;
		}
	}
}
.user {
	padding: 20rpx 10rpx;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		text {
			display: inline-block;
			&:nth-child(1) {
				height: 44rpx;
				line-height: 44rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
			&:nth-child(2) {
				color: #4cbd66;
				font-size: 28rpx;
				&:before {
					margin-right: 10rpx;
				}
			}
		}
	}
	.lists {
		display: flex;
		justify-content: flex-start;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 156rpx;
			height: 108rpx;
			background: #F4F4F4;
			border-radius: 10rpx;
			margin: 0 20rpx;
			text {
				&:nth-child(1) {
					color: #333333;
					font-size: 32rpx;
				}
				&:nth-child(2) {
					font-size: 28rpx;
					color: #888888;
				}
			}
		}
	}
}
// .message-content-box {
// 	.message-content {
		// position: relative;
		.sub_title {
			width: 750rpx;
			left: 0;
			right: 0;
			bottom: 0;
			height: 46rpx;
			line-height: 46rpx;
			// position: absolute;
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #666666;
			display: flex;
			justify-content: center;
			text {
				border-radius: 6rpx;
				background: #F7F8FC;
				padding: 0 20rpx;
				
			}
		}
// 	}
// }
.sub_titles {
	width: 610rpx;
	// left: 70rpx;
	// right: 70rpx;
	// bottom: -120rpx;
	// height: 46rpx;
	padding: 0 20rpx;
	line-height: 46rpx;
	// position: absolute;
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #666666;
	background: #F7F8FC;
	border-radius: 6rpx;
	color: #4cbd66;
	margin: 30rpx auto;
	text {
		color: #666666;
	}
}
.section {
	display: flex;
	flex-direction: column;
	align-items: center;
	// margin-top: 160rpx;
	.head {
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		width: 690rpx;
		margin-bottom: 24rpx;
		padding: 30rpx 28rpx;
		> view {
			&:nth-child(1) {
				margin-bottom: 18rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 33rpx;
			}
			&:nth-child(2) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				view {
					color: #666666;
					font-size: 28rpx;
					text {
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;
						margin-left: 16rpx;
					}
				}
				> text {
					color: #4CBD66;
					font-size: 28rpx;
				}
			}
		}
	}
	.doctor {
		width: 690rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		.title {
			padding: 18rpx 28rpx 0 28rpx;
			text {
				&:nth-child(1) {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}
				&:nth-child(2) {
					color: #666666;
					margin-left: 18rpx;
					font-size: 28rpx;
				}
			}
		}
	}
}
.list {
	width: 690rpx;
	.item {
		margin-bottom: 1rpx;
		padding: 26rpx;
		border:10rpx;
		.top {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.img {
				margin-right: 22rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50rpx;
				}
				text {
					position: absolute;
					bottom: -16rpx;
					display: inline-block;
					width: 66rpx;
					height: 32rpx;
					border-radius: 16rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 32rpx;
					text-align: center;
					color: #FFFFFF;
					background: #ccc;
					&.c {
						color: #FFFFFF;
						background: #4CBD66;
						z-index: 9;
					}
				}
			}
			.info {
				.member {
					.text {
						height: 42rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #555555;
						line-height: 42rpx;
						margin-left: 12rpx;
						margin-right: 14rpx;
					}
					text {
						display: inline-block;
						&:nth-child(1) {
							height: 54rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 54rpx;
						}
						// &:nth-child(2) {
						// 	height: 42rpx;
						// 	font-size: 26rpx;
						// 	font-family: PingFang SC-Medium, PingFang SC;
						// 	font-weight: 400;
						// 	color: #555555;
						// 	line-height: 42rpx;
						// 	margin-left: 12rpx;
						// 	margin-right: 14rpx;
						// }
						&:nth-child(2) {
							width: 160rpx;
							height: 44rpx;
							background: #E9F4EB;
							border-radius: 22rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #4CBD66;
							line-height: 44rpx;
							text-align: center;
						}
					}
				}
				.address {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #777777;
					line-height: 42rpx;
					margin-top: 8rpx;
					margin-bottom: 6rpx;
				}
			}
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.left {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				text {
					&:nth-child(1) {
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}
					&:nth-child(2) {
						width: 380rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #888888;
						line-height: 42rpx;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				text {
					&:nth-child(1) {
						font-size: 44rpx;
						font-family: DIN-Bold, DIN;
						font-weight: bold;
						color: #E31F1F;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 28rpx;
					}
				}
			}
		}
	}
}

	.lefts {
		view {
			padding: 22rpx 0;
			margin: 0 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			&.cur {
				text {
					color: #4CBD66;
				}
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			text {
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}
		}
	}
	/deep/.u-drawer {
		.head {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text {
				&:nth-child(1) {
					text-align: center;
					color: #333;
					font-size: 30rpx;
					width: calc(100% / 3);
				}
			}
			.iconfont {
				width: calc(100% / 3);
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
	
.tips {
	position: fixed;
	width: 100%;
	min-height: 80rpx;
	background: rgba(247, 76, 49, 0.9);
	color: #FFFFFF;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 30rpx;
	z-index: 99999;
}
</style>
